<template>
    <div class="flex">
       <div class="warps">
         <div 
       class="items"
       v-for="(item,index) in datas.value"
       :style="{width:`${configs.w}px`,height:`${item*0.8}px`,left:`${index*offset*2}px`}"
       >

       </div>
    
       <svg class="svgdoms">
         
         <path  
         
         class="shadow"
         :d="paths" stroke="#5cf4ff" stroke-width="4" fill="none"  >
           
         </path> 
         <circle
         class="shadow"
         v-for="(item,index) in datas.value"
      
         :cx="`${(index*offset*2) }`" :cy="`${(280-item*0.8)-13}`" :r="5-5*(((280-item*0.8)-13)/280)" stroke="#5cf4ff"
          stroke-width="2" fill="#5cf4ff"/>
        </svg>
      
       </div>
       <div class="bgs">
            <div
            v-for="item in arr"
            class="box"
            :style="{
               transform:`translate(${item.x}px,${item.y}px) scale(${item.slect})`,
               opacity:`${item.slect-0.9}`
            }"
            >
                
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup> 
import {  computed, ref  } from "vue";
const props = defineProps(['type','datas','count']);
let configs = {
    w:10
} 
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
let offset = viewportHeight/props.count
const paths = computed(()=>{
      let arr = ''; 
      props.datas.value.forEach((item,index)=>{
          if(index==0){
            arr+=`M ${index*offset*2 } ${280-item*0.8-13}`
          }else{
            arr+=`L ${index*offset*2} ${280-item*0.8-13}`
          } 
      })
      return arr;
}) 
let arr =  ref([])

/**
 * 
 * 初始化
 *  */ 
for (let index = 0; index < 200; index++) {
  let s = Math.random()*10;
 
     let obj = {
         key:index%5,
         n:0,
         startX:Math.random()*viewportWidth+1,
         x:Math.random()*viewportWidth+1,
         y:Math.random()*120+1,
         random:Math.random()*5.3+0.3,
         slect:Math.abs(Math.sin( s*Math.PI/180)*10)
     }
   
    arr.value.push(obj);
}

let c = 0;
/**
 * 动态改变布局
 */
let timer = Date.now();
function boxanmis() {
  c+=0.6;
//   let now = Date.now();
//    if(now-timer>14){
    
//       timer = now;  
//    }

//   requestIdleCallback(boxanmis)
arr.value.forEach(item=>{ 
       item.n=Math.random()*10;  
       item.x = item.startX ; 
       item.y=item.y>-viewportHeight?(item.y-item.random):0;
     
      }) 
}
boxanmis()
 setInterval(()=>{
  boxanmis()
 },30)
</script>
<style scoped>    
.bgs{
   width:100%;
   position: absolute;
   left: 0;
   top: 0;
   height: 75%;
   overflow: hidden;
   -webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,0.2));


}
.box{
   width: 15px;
   height: 15px;
   /* background-color: #5f5f5f; */
   border: 1px solid #fff;
   border-radius: 50%; 
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 1; 
   box-shadow:inset 0 0 5px 1px #fff;

}
 

.svgdoms{
   width: 100%;
   height: 300px;
   position: absolute;
   left: 0;
   bottom: 0;
   
}       
.sbclsx{
   width: 500px;
   height: 500px;
}
.flex{
   height: 100vh;
   position: relative;
   width: 100%;
   background: url('../assets/bgs.jpg') no-repeat;
   background-size: 100%;
   overflow: hidden;
  
}
.warps{
   height: 100vh;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 99999;
   width: 100%;
   transform: scale(0.5) ;
   overflow: hidden;
   -webkit-box-reflect: below 1px -webkit-linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,0.2));

}
.shadow{
   --colorA: #5cf4ff;
    filter:
        drop-shadow(0 0 2px var(--colorA))
        drop-shadow(0 0 5px var(--colorA)) 
}
.items{
   
   height: 20px;
   background:#5cf4ff;
   position: absolute;
   bottom: 20px;
   left: 0;
   z-index: 10;
   border-radius: 10px 10px 0 0 ;
   z-index: 99999;
   box-shadow: 0 0 8px 1px #5cf4ff;
}
</style>